<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #iphone-1 {
        width: 320px;
        height: 600px;
        margin: auto;
        /* border: 1px solid black; */
    }
    
    .example {
        width: 150px;
        height: 200px;
        float: left;
        border: 1px solid red;
        border-radius: 10px;
    }
    
    .example>#tp {
        width: 100px;
        height: 100px;
        margin: auto;
        /* border: 1px solid #fac; */
    }
    
    p {
        color: rgb(251, 174, 19);
    }
</style>

<body>
    <div id="app">
        <h2>您点击了{{changeData}}</h2>
        <my-cpn :list="list" @add="change"></my-cpn>
    </div>

    <template id="iphone">
        <div id="iphone-1" >
            
            <div class="example"
             v-for="(item,index) in list" 
            :key="item.id"
             @click="change(item.name)">
                <div id="tp">
                    <img :src="item.url" alt="">
                </div>
                <h5>{{item.name}}</h5>
                  <p>{{item.price |newPrice }}</p>
            </div>
         
           
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    list: [{
                        id: 1,
                        name: '小米11',
                        price: 5999,
                        url: '../img/4a05330038898964f80945746ebeec5b.png'
                    }, {
                        id: 2,
                        name: '插座',
                        price: 49,
                        url: '../img/4a05330038898964f80945746ebeec5b.png'
                    }, {
                        id: 3,
                        name: '音响',
                        price: 49,
                        url: '../img/4a05330038898964f80945746ebeec5b.png'
                    }, {
                        id: 4,
                        name: '红米9',
                        price: 999,
                        url: '../img/4a05330038898964f80945746ebeec5b.png'
                    }, {
                        id: 5,
                        name: '剃须刀',
                        price: 99,
                        url: '../img/4a05330038898964f80945746ebeec5b.png'
                    }, {
                        id: 6,
                        name: '小米手环',
                        price: 229,
                        url: '../img/4a05330038898964f80945746ebeec5b.png'
                    }, ],
                    changeData: null

                }
            },
            components: {
                'my-cpn': {
                    template: '#iphone',
                    props: ['list'],
                    filters: {
                        newPrice(val) {
                            return '￥' + val.toFixed(2)
                        }
                    },
                    methods: {
                        // 自定义里面模块的change
                        change(i) {
                            this.$emit('add', i)
                        }
                    }
                }
            },
            methods: {
                // 点击事件里面的change
                change(val) {
                    console.log(val);
                    console.log(this.changeData)
                    this.changeData = val
                }
            }
        })
    </script>
</body>

</html>